<template>
  <div class="header">
    <logo />
    <div class="title-wrap">
      <span v-if="showMonth">{{ queryData.month }}月 |</span>
      <span class="title">{{ queryData.buName === '全部' ? '' : queryData.buName }} {{ title }}</span>
    </div>

    <!-- 10月 | 华润集团 采购监管月报 -->
    <div class="buttonGroup">
      <Select v-model="queryData.year" placeholder="年份" @on-change="changeYear" class="button" size="large">
          <Option v-for="item in yearList" :value="item" :key="item">{{ item }}年</Option>
      </Select>

      <Select v-model="queryData.month" placeholder="月份" @on-change="changeMonth" class="button" size="large">
          <Option v-for="item in monthList" :value="item" :key="item">{{ item }}月</Option>
      </Select>

      <Select v-model="queryData.buCode" placeholder="请选择" @on-change="changeBu" filterable class="button" size="large">
          <Option v-for="item in buList" :value="item.buCode" :key="item.buCode">{{ item.buName }}</Option>
      </Select>
    </div>
  </div>
</template>

<script>
  import logo from './LogoSvg.vue'
  import { dataQualityAPI } from "@api/dataQuality";
  export default {
    props:{
      title: {
        type: String,
        default: '华润集团国资监管画像'
      },
      showMonth: {
        type: Boolean,
        default: true,
      }
    },

    data(){
      return {
        yearMonthList:[],
        yearList:[],
        monthList:[],
        buList:[],
		sbuCodes:"",
		id:"",
        queryData:{
          buName:"",
          buCode: "",
          year: "",
          month: ""
        }
      }
    },

	watch:{
		'$store.state.user.currentSysInfo.userPurview':{
			handler(newVal) {
			    this.id = newVal?.id || "";
				this.sbuCodes = newVal?.crsrmPurchaserSbu || "";
				if(this.id && this.sbuCodes){
					this.getYearAndMonth()
				}
			},
			immediate: true
		}
	},

    methods:{
      getBuList(){
        dataQualityAPI.getBu({sbuCodes:this.sbuCodes}).then(res => {
          if(res.code === 200){
            const buList = res.data || [];
            this.buList = buList?.length ? buList.filter(ele => ele.checked) : [];
            this.queryData.buCode = res.data[0].buCode;
            this.queryData.buName = res.data[0].buName;
            this.$emit('getData',{
              id:this.id,
              buName:this.queryData.buName,
              buCode: this.queryData.buCode,
              month: this.queryData.month,
              year: this.queryData.year
            });
          }
        })
      },

      getYearAndMonth(){
        dataQualityAPI.getYearAndMonth().then(res => {
          if (res.code === 200) {
              this.yearMonthList = res.data || [];
              if(this.yearMonthList?.length){
                this.yearList = this.yearMonthList.map(ele => ele.year);
                this.monthList = this.yearMonthList[0].month || [];
                this.queryData.year = this.yearList[0];
                this.queryData.month = this.monthList[0];
              }
              else{
                this.yearList = [];
                this.monthList = [];
              }
          }
          this.getBuList();
        })
      },

      changeYear(){
        this.monthList = this.yearMonthList.find(ele => ele.year == this.queryData.year)?.month || [];
        this.queryData.month = this.monthLis[0];
      },

      changeMonth(){
        if(this.queryData.month){
          this.$emit('getData',{
            id:this.id,
            buName:this.queryData.buName,
            buCode: this.queryData.buCode,
            month: this.queryData.month,
            year: this.queryData.year
          });
        }
      },

      changeBu(item){
        this.queryData.buCode = item;
        this.queryData.buName =  this.buList.find(ele => ele.buCode == item)?.buName;
        this.$emit('getData',{
          id:this.id,
          buName:this.queryData.buName,
          buCode: this.queryData.buCode,
          month: this.queryData.month,
          year: this.queryData.year
        });
      }
    },

    components:{
      logo
    }
}
</script>

<style scoped lang="less">
  .header {
    width:100%;
    height:80px;
    padding-bottom: 10px;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  .title-wrap {
    flex:1;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: Source Han Sans CN;
    font-weight: 900;
    font-size: 32px;
    color: #1B2A52;
    line-height: 67.5px;
    letter-spacing: 9px;
    .title{
      margin-left: 14px;
    }
  }
  .button {
    width: 112px;
    border: 2px solid;
    border-radius: 10px;
    border-color: #fff;
    background-color: #FFF;
    &:not(:first-child) {
      margin-left: 20px;
    }

  }
  .buttonGroup {
    display: flex;
    align-items: center;
    justify-content: space-between;
    /deep/.ivu-select-selection{
      border: none;
      height: 45px;
      .ivu-select-selected-value{
        height: 45px;
        line-height: 45px;
      }
    }
    /deep/.ivu-select-input{
        height: 40px;
        line-height: 45px;
    }
    /deep/.ivu-select-arrow{
      color: #FFAD11;
    }
  }
</style>